﻿
[class*="span"] 
{
	float: left;
	width: 100%;
}
body
{
	font-family: sans-serif;
	font-weight: normal;
	background-color: #666;
}
ul
{
    list-style-type:none;
}
#container
{
	overflow:hidden;
	
}
header h1
{
   font-size: 80%;
   text-align: center;
   color: #fff;
   margin: 0px;
}
header
{
   background: #5c1e1e;
   background: -webkit-gradient(linear, left top, left bottom, from(#963e3e), to(#5c1e1e));
   background: -webkit-linear-gradient(top, #963e3e, #5c1e1e);
   background: -moz-linear-gradient(top, #963e3e, #5c1e1e);
   background: -ms-linear-gradient(top, #963e3e, #5c1e1e);
   background: -o-linear-gradient(top, #963e3e, #5c1e1e); 
   padding: 3%;
   border: 1px solid #000;
   border-top: 2px solid #c76565;
   box-shadow: #000 0 5px 10px;
   border-radius: 2px;
}
.boxHeader
{
   border-top: 1px solid #c76565;
   background: #402121;
   background: -webkit-gradient(linear, left top, left bottom, from(#6e3435), to(#402121));
   background: -webkit-linear-gradient(top, #6e3435, #402121);
   background: -moz-linear-gradient(top, #6e3435, #402121);
   background: -ms-linear-gradient(top, #6e3435, #402121);
   background: -o-linear-gradient(top, #6e3435, #402121);
   margin:none;
   font-size: 80%;
   font-weight: lighter;
   font-family: sans-serif;
   text-align: center;
   color: #fff;
   border-radius: 2px;
   padding-bottom: 2%;
}
.show-hide
{
   text-align: center;
   color: #A3A3A3;
   font-size: 14px;
   float: right;
   display: block;
   border-radius: 2px;
   background: #0f0f0f;
   background: -webkit-gradient(linear, left top, left bottom, from(#4a4a4a), to(#0f0f0f));
   background: -webkit-linear-gradient(top, #4a4a4a, #0f0f0f);
   background: -moz-linear-gradient(top, #4a4a4a, #0f0f0f);
   background: -ms-linear-gradient(top, #4a4a4a, #0f0f0f);
   background: -o-linear-gradient(top, #4a4a4a, #0f0f0f);
   background: -o-linear-gradient(top, #b04d4d, #851919);
   border-radius: 0 0 0 6px;
   padding: 1% 1% 1% 3%;
}
#NowPlaying
{
   background-color: #222;
   color: #fff;
   font-size: 100%;
   overflow: hidden;
   border-radius: 0 2px 0 2px;
   box-shadow: #000 0 3px 10px;
}
#NowPlaying p
{
   display: inline;
}
#updateInfo
{
    float: right;
}
#infoHead
{
   background-color: #000;
   padding: 3%;
}
#artist
{
   font-size: 110%;
   margin: none;
   font-weight: bold;
}
#genre
{
   font-size: 90%;
}
#bio
{
   width: 85%;
   overflow: hidden;
}
.ArtistBio
{
   padding: 3%;
   background-color: #111;
   font-size: 80%;
}
#thePlayer
{
   width: 100%;
}
#SearchBar
{
    padding: 3px;
    background-color: #000;
}
#search
{
    text-align:left;
    margin-left: 3%;
    padding: 5px;
    width: 95%;
    color: #ccc;
    border: 1px solid #ccc;
}
#MakeListArea
{
    padding: 0 2% 2% 2&;
    background-color: #222;
    border: 1px solid #000;
    color: #fff;
    margin-top: 2%;
    border-radius: 2px;
    box-shadow: #000 0 3px 10px;
}
#BrowseInfo
{
   border: 1px solid #000;
   border-radius: 6px;
   background-color: #555;
   padding: none;
}
#BrowseInfo li
{
   display: block;
   padding: 1%;
}
#addArea
{
    padding: 0 2% 2% 2&;
    background-color: #222;
    border: 1px solid #000;
    color: #fff;
    margin: 2% 0 2% 0;
    border-radius: 2px;
    box-shadow: #000 0 3px 10px;
}
#AddSongs
{
    padding: 2%;
}

#LyricsArea 
{
    background-color: #222;
    text-align: center;
    color: #fff;
    margin-top: 2%;
    border-radius: 6px;
    box-shadow: #000 0 3px 10px;
    overflow: hidden;
}
#SongLyrics
{
    background-color: #F2F0E4;
    color: #000;
    margin: 1%;
    height: 100%;
    padding: 2%;
    font-size: 90%;
    border-radius: 2px;
    border: 1px solid #000;
}

/* BrowseList */
#QueryResults {
    color: #fff;
    font-size: 80%;
    font-family: 'Raleway', Helvetica, Arial, sans-serif;
    padding: 0 10px 0 10px;
    margin: 7px;
}
#QueryResults li {
    padding: 1%;
    border: 1px solid #111;
    background-color: #333;
}
button
{
    border: 1px solid #111;
    border-radius: 3px;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: white;
    border: none;
    padding: 2% 3%;
    background: #1a5d66;
    background: -webkit-gradient(linear, left top, left bottom, from(#15a1b0), to(#1a5d66));
    background: -webkit-linear-gradient(top, #15a1b0, #1a5d66);
    background: -moz-linear-gradient(top, #15a1b0, #1a5d66);
    background: -ms-linear-gradient(top, #15a1b0, #1a5d66);
    background: -o-linear-gradient(top, #15a1b0, #1a5d66);
}
button:hover
{
    background: #2da2a6;
}
#playlistOptions li
{
    display: inline;
}
#playlistToLoad
{
    font-size: 80%;
    margin-left: -6%;
}
#playlistToLoad li 
{
    cursor: pointer;
    background-color: #363636;
    border: 1px solid #404040;
    padding: 1%;
    text-align: center;
    border-radius: 4px;
    box-shadow: #000 0 1px 4px;
    margin: 1%;
}
#BrowseList li:hover 
{
    cursor: pointer;
    background-color: #404040;  
}
#addSongs
{
    background-color: #000;
    padding: 2%;
    border-radius: 2px;
}
#title
{
    font-size: 80%;   
}
#noResults
{
    font-size: 80%; 
    color: #999;
    margin-left: 5%;  
}
#UploadSuccess
{
    font-size: 80%; 
    color: #000;
    width: 100%;
    border-radius: 4px;
    background: #338504;
    background: -webkit-gradient(linear, left top, left bottom, from(#5e9c3e), to(#338504));
    background: -webkit-linear-gradient(top, #5e9c3e, #338504);
    background: -moz-linear-gradient(top, #5e9c3e, #338504);
    background: -ms-linear-gradient(top, #5e9c3e, #338504);
    background: -o-linear-gradient(top, #5e9c3e, #338504);
    padding: 1% 10% 1% 10%;
    margin: 1%;  
}
#searchMsg
{
    font-size: 70%;
    color: #444;
    margin-left: 10%;
}

/**LARGE SCREEN**/
@media only screen and (min-width: 600px) {
	.h1
	{
		font-size: 200%;
		font-family: 'Fugaz One', cursive;
	}
	#artist
	{
		font-size: 180%;
		font-family: 'Fugaz One', cursive;
		font-weight: normal;
	}
	.span-left {
		width: 49.5%;
		float: left;
	}
	.span-right {
		width: 50%;
		float: right;
	}
    #showLyrics
    {
        display: none;   
    }	
    .show-hide
    {
        display:none;
    }
}